import React, {Suspense, lazy} from "react"
import {Router, Switch, Route} from "react-router-dom"
import {history} from "./history"
import Spinner from "./components/@vuexy/spinner/Loading-spinner"
import {ContextLayout} from "./utility/context/Layout"
import {getAccessToken, getUserData, resetAuthData} from './services/auth/auth.service';
import Tasks from "./views/pages/tasks/Tasks";
import Contacts from "./views/pages/contacts/Contacts";
import ComingSoon from "./views/pages/ComingSoon";

// Route-based code splitting
const Projects = lazy(() => import("./views/pages/projects/Projects"))
const Analytics = lazy(() => import("./views/pages/analytics/Analytics"))
const login = lazy(() => import("./views/pages/authentication/login/Login"))
const register = lazy(() => import("./views/pages/authentication/register/Register"))
const Events = lazy(() => import("./views/pages/events"))
const Event = lazy(() => import("./views/pages/events/eventDetail"))
const Users = lazy(() => import("./views/pages/users/Users"))
const Releases = lazy(() => import("./views/pages/releases"))
const Release = lazy(() => import("./views/pages/releases/releaseDetail"))
const ReleaseForm = lazy(() => import("./views/pages/releases/Form"))

// Set Layout and Component Using App Route
const AppRoute = ({
                    component: Component,
                    fullLayout,
                    permission,
                    auth,
                    noAuth,
                    ...rest
                  }) => (
  <Route
    {...rest}
    render={props => {
      if (auth) {
        if (!getAccessToken()) {
          history.push("/login")
          return
        }
      } else if (noAuth) {
        if (getAccessToken() !== '' && JSON.stringify(getUserData()) !== '{}') {
          history.push("/")
          return
        } else {
          resetAuthData()
        }
      }
      return (
        <ContextLayout.Consumer>
          {context => {
            let LayoutTag =
              fullLayout === true
                ? context.fullLayout
                : context.state.activeLayout === "horizontal"
                ? context.horizontalLayout
                : context.VerticalLayout
            return (
              <LayoutTag {...props}>
                <Suspense fallback={<Spinner/>}>
                  <Component {...props} />
                </Suspense>
              </LayoutTag>
            )
          }}
        </ContextLayout.Consumer>
      )
    }}
  />
)

class AppRouter extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Router history={history}>
          <Switch>
            <AppRoute exact path="/" component={Projects} permission="user"/>
            <AppRoute path="/dashboard" component={Analytics} auth/>
            <AppRoute path="/login" component={login} fullLayout noAuth/>
            <AppRoute path="/register" component={register} fullLayout noAuth/>
            <AppRoute path="/events/:eventId/:tab" component={Event} permission="user"/>
            <AppRoute path="/events" component={Events} permission="user"/>
            <AppRoute path="/users" component={Users} permission="admin"/>
            <AppRoute path="/tasks" component={Tasks} auth/>
            <AppRoute path="/contacts" component={Contacts} auth/>
            <AppRoute path="/coming" component={ComingSoon} auth/>
            <AppRoute path="/releases/:releaseId/:tab" component={Release} permission="user"/>
            <AppRoute path="/releases" component={Releases} permission="user"/>
            <AppRoute path="/release-form/:code" component={ReleaseForm} fullLayout/>
          </Switch>
        </Router>
      </React.Fragment>
    )
  }
}

export default AppRouter
